<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>pointTwinkle2Dcopy</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #info {
      background-color: black;
      opacity: 0.75;
      color: orange;
      font-size: 18pt;
      padding: 8px;
      visibility: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>
  <script src="./mockData.js"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/Graphic"
    ], function (
      Map,
      MapView,
      FeatureLayer, GraphicsLayer, Graphic
    ) {

      const Layerf = new FeatureLayer({
        url: "https://wl.arcgisonline.cn/server/rest/services/wl/hightf/FeatureServer/0",
        outFields: ["*"]
      });

      const map = new Map({
        basemap: "osm",
        layers: [Layerf]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [112.57, 38],
        highlightOptions: {
          color: "blue"
        }
      });

      view.ui.add("info", "top-right");
      console.log(typePoints);


      const graphics = []
      typePoints.forEach(item => {
        const [longitude, latitude] = item.location
        let graphic = new Graphic({
          //每个点的地理属性
          geometry: {
            type: "point",
            latitude,
            longitude
          },
          //每个点的属性
          attributes: item
        })
        graphics.push(graphic)
      })
      initDeviceLayer(graphics);


      view.on("click", function (event) {
        view.hitTest(event)
          .then(result => {
            console.log(result);
          });
      });

      // 初始化图层设备
      function initDeviceLayer(source) {
        var arr = [
          { id: 0, count: 0, label: '在线', value: 'ONLINE', active: true },
          { id: 1, count: 0, label: '离线', value: 'OFFLINE', active: true },
          { id: 2, count: 0, label: '未激活', value: 'UNACTIVATED', active: true },
        ];

        uniqueValueInfos = arr.map((item, index) => {
          return {
            value: item.value,
            symbol: {
              type: "picture-marker",
              url: `./imgs/camera_m_${index + 1}.svg`
            }
          }
        })
        const layer = new FeatureLayer({
          id: 'deviceLayer',
          title: "设备图层",
          //从attributes中获取的内部fields
          fields: [
            {
              name: "ObjectID",
              type: "oid"
            },
            {
              name: "id",
              type: "string"
            },
            {
              name: "deviceUid",
              type: "string"
            },
            {
              name: "deviceStatus",
              type: "string"
            }
          ],
          //让所有fields对外可访问
          outFields: ["*"],
          objectIdField: "ObjectID",
          geometryType: "point",
          source: [],
          renderer: {
            type: "unique-value",
            //提取deviceStatus作为渲染图标类型的标识
            valueExpression: `return $feature.deviceStatus`,
            //所有图标类型声明
            uniqueValueInfos,
            //根据缩放程度调整尺寸
            visualVariables: [
              {
                type: "size",
                valueExpression: "$view.scale",
                stops: [
                  { value: 500000, size: 10 },
                  { value: 250000, size: 10 },
                  { value: 125000, size: 15 },
                  { value: 32000, size: 30 },
                ]
              }
            ]

          },
          popupTemplate: {
            title: "{deviceUid}",
            content: [{
              type: "fields",
              fieldInfos: [{
                label: '设备Uid',
                fieldName: 'deviceUid'
              }, {
                label: '设备id',
                fieldName: 'id'
              }, {
                label: '设备状态',
                fieldName: 'deviceStatus'
              }]
            }]
          }
        })
        map.add(layer)

        layer.applyEdits({ addFeatures: source }).then(results => {
          console.log(`deleteFeatures:${results.deleteFeatureResults.length}`)
          console.log(`addFeatures:${results.addFeatureResults.length}`)
        })

      }
    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="info">
    <span id="name"></span>
    <br>
    <span id="catalogy"></span>
    <br>
    <span id="location"></span>
  </div>
</body>

</html>